<template>
	<div class="iconList">
		<div class="wrapper">
			  <div class="icon" v-for='item of iconImg' :key='item.id' @click="gotoPath(item.path)">
				  <div class="icon_img" :style="{background:item.backgroundColor}"><img class='img' :src="item.imgUrl"></div>
				  <div class="icon_desc">{{item.Desc}}</div>
			  </div>
		</div>
	</div>
  
</template>

<script>
export default {
  name: 'travel_homeIconBtn',
  data(){
	  return{
		  iconImg:[
			  {
				  id:'001',
				  imgUrl:'',
				  Desc:'本地热推',
				  backgroundColor:'#6dcf16',
				  path:'/'
			  },
			  {
			      id:'002',
			      imgUrl:'https://pic5.40017.cn/01/001/9d/a8/rBANC1rPFcWAaF5sAAAIHYwRlQQ791.png',
				  Desc:'宜兴竹海',
				  backgroundColor:'#fda424',
				  path:'/'
			  },
			  {
			      id:'003',
			      imgUrl:'https://pic5.40017.cn/01/001/6d/8f/rBANC1mEG1aAU0Q6AAAHyLUGdmU162.png',
				  Desc:'迪士尼',
				  backgroundColor:'#41a9f2',
				  path:'/'
			  },
			  
		  ]
	  }
  },
  methods:{
	  gotoPath(path){
		  this.$router.push(path)
	  }
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.iconList
	width:100%
	position:relative
	border-bottom:8px solid #edf0f5
	.wrapper
		width:90%
		margin:0 auto
		overflow:hidden
		display:flex
		.icon
			width:33%
			margin:0.4rem auto
			.icon_img
				width:40%
				border-radius:50%
				margin:0 auto
				.img
					width:100%
			.icon_desc
				padding:10px 0 0 0
				text-align:center
				font-size:0.3rem
.clearfix:after
	display:block
	content:''
	clear:both
</style>
